<template>
<body>
		<div class="wrapper">
			
			<!-- header部分 -->
			<header>
				<p>在线支付</p>
			</header>
			
			<!-- 订单信息部分 -->
			<h3>订单信息：</h3>
			<div class="order-info">
				<p>
					{{orders.business.businessName}}
					<i class="fa fa-caret-down" id="showBtn" @click='shown(orders)'></i>
				</p>
				<p>&#165;{{orders.orderTotal}}</p>
			</div>
			
			<!-- 订单明细部分 -->
			<ul class="order-detailet" id="detailetBox" v-for='item in orders.orderdetailetList' v-show='orders.isShown==true'>
				<li v-for='food in foods' v-show='item.foodId==food.foodId'>
					<p>{{food.foodName}} x {{item.quantity}}</p>
				</li>
			</ul>
            <ul class="order-detailet">
                <li>
                <p>配送费</p>
                <p>&#165;{{orders.business.deliveryPrice}}</p>
                </li>
            </ul>
			
			<!-- 支付方式部分 -->
			<ul class="payment-type">
				<li>
					<button style='margin: 0px;padding: 0px;border: 0px;outline: none;'  @click='select(1)'><img src="../assets/alipay.png"></button>
					 <i class="fa fa-check-circle" v-show="alipayButton==1" ></i>
				</li>
				<li>
					<button  style='margin: 0px;padding: 0px;border: 0px;outline: none;' @click='select(2)'><img src="../assets/wechat.png"></button>
                     <i class="fa fa-check-circle" v-show="wechatButton==1" ></i>
				</li>
			</ul>
			<div class="payment-button">
				<button @click='update()'>确认支付</button>
			</div>
			
			<!-- 底部菜单部分 -->
			<Footer></Footer>
		</div>	
	</body>
</template>

<script>
    import Footer from '../components/Footer.vue'

    export default({
        name:'payment',
        data(){
            return{
                businessId:this.$route.query.businessId,
                orderId:this.$route.query.orderId,
                orders:{},
                user:{},
                foods:[],
                alipayButton:true,
                wechatButton:false
            }
        },
        components:{
            Footer
        },
        created(){
            this.user=this.$getSessionStorage('user');
            this.$axios.post('OrdersController/getOrdersById',this.$qs.stringify({
                orderId:this.orderId
            })).then(response=>{
                var ods=response.data;
                ods.isShown=false;
                this.orders=ods;
            }).catch(error=>{
                console.error(error);
            });
            this.$axios.post('FoodController/listFoodByBusinessId',this.$qs.stringify({
                businessId:this.businessId
            })).then(response=>{
                this.foods=response.data;
            }).catch(error=>{
                console.error(error);
            });


            
        },

    methods:{
        shown(x){
            x.isShown= !x.isShown;
        },
        update(){
            this.$axios.post('OrdersController/updateOrderByOrderId',this.$qs.stringify(
                {
                    orderId:this.orderId
                }
            )).then(response=>{
                if(response.data!=0)
                {window.alert('下单成功，请等待收货！');}
            }).catch(error=>{
                console.error(error);
            })
            this.$router.push({path:'/index'});
        },
        select(index){
            if(index==1)
            {
                this.alipayButton=true;
                this.wechatButton=false;
            }
            else
            {
                this.alipayButton=false;
                this.wechatButton=true;
            }
        }




    }
    
    })



</script>












<style scoped>
 /****************** 总容器 ******************/
    .wrapper{
        width: 100%;
        height: 100%;
    }

    /****************** header部分 ******************/
    .wrapper header{
        width: 100%;
        height: 12vw;
        background-color: #0097FF;
        color: #fff;
        font-size: 4.8vw;
        
        position: fixed;
        left: 0;
        top: 0;
        z-index: 1000;
        
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /****************** 订单信息部分 ******************/
    .wrapper h3{
        margin-top: 12vw;
        box-sizing: border-box;
        padding: 4vw 4vw 0;
        
        font-size: 4vw;
        font-weight: 300;
        color: #999;
    }
    .wrapper .order-info{
        box-sizing: border-box;
        padding: 4vw;
        font-size: 4vw;
        color: #666;
        
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .wrapper .order-info p:last-child{
        color: orangered;
    }
    /****************** 订单明细部分 ******************/
    .wrapper .order-detailet{
        width: 100%;
    }
    .wrapper .order-detailet li{
        width: 100%;
        box-sizing: border-box;
        padding: 1vw 4vw;
        
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .wrapper .order-detailet li p{
        font-size: 3vw;
        color: #666;
    }

    /****************** 支付方式部分 ******************/
    .wrapper .payment-type{
        width: 100%;
    }
    .wrapper .payment-type li{
        width: 100%;
        box-sizing: border-box;
        padding: 4vw;
        
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .wrapper .payment-type li img{
        width: 33vw;
        height: 8.9vw;
    }
    .wrapper .payment-type li .fa-check-circle{
        font-size: 5vw;
        color: #38CA73;
    }
    .wrapper .payment-button{
        width: 100%;
        box-sizing: border-box;
        padding: 4vw;
    }
    .wrapper .payment-button button{
        width: 100%;
        height: 10vw;
        border: none;
        /*去掉外轮廓线*/
        outline: none;
        border-radius: 4px;
        background-color: #38CA73;
        color: #fff;
    }
    /****************** 底部菜单部分 ******************/
    .wrapper .footer{
        width: 100%;
        height: 14vw;
        border-top: solid 1px #DDD;
        background-color: #fff;
        
        position: fixed;
        left: 0;
        bottom: 0;
        
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .wrapper .footer li{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        
        color: #999;
        user-select: none;
        cursor: pointer;
    }
    .wrapper .footer li p{
        font-size: 2.8vw;
    }
    .wrapper .footer li i{
        font-size: 5vw;
    }
</style>